<!--
* @description 重大问题
* @author zywu
* @date 2021/01/09 10:49:59
!-->
<template>
  <div class="keyIssues-content">
    <div class="content-top-title">
      <p class="title-text">重大问题回顾</p>
    </div>
    <div class="content-detail-title">
      <img
        src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
        style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;"
      />
      重大问题{{periodName}}环比
    </div>
    <div class="statistics-quantity white-bg">
      <div>
        <div>
          <span id="keyIssues-lastWeek">{{majorIssuesProportion.lastWeekTime}}</span>
          <p>上{{periodName}}总数</p>
        </div>
        <div>
          <span id="keyIssues-thisWeek">{{majorIssuesProportion.thisWeekTime}}</span>
          <p>本{{periodName}}总数</p>
        </div>
        <div v-if="majorIssuesProportion.lastWeekTime == '0'">
          <span id="fireHazard-precent" style="color:#FA7C5A;">+{{majorIssuesProportion.percent}}</span>
          <p id="fireHazard-text">增长</p>
        </div>
        <div v-else-if="result>=0">
          <span id="fireHazard-precent" style="color:#FA7C5A;">+{{majorIssuesProportion.percent}}%</span>
          <p id="fireHazard-text">增长</p>
        </div>
        <div v-else>
          <span id="fireHazard-precent" style="color:#75CD7E;">-{{majorIssuesProportion.percent}}%</span>
          <p id="fireHazard-text">降低</p>
        </div>
      </div>
    </div>
    <div
      v-if="majorIssuesProportion.lastWeekTime != 0 && majorIssuesProportion.thisWeekTime != 0"
      class="keyIssues-chart"
    >
      <div id="keyIssuesChart" class="chart-content" style="width: 100%;"></div>
    </div>
    <div class="keyIssues-leaderboard" id="keyIssuesList_box">
      <div class="content-detail-title">
        <img
          src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
          style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;"
        />重大问题单位排名
      </div>
      <ul v-if="dataList.length>0" id="keyIssuesList">
        <li v-for="(item,i) in dataList" :key="i">
          <div class="item-number">
            <div class="item-num-div">{{i + 1}}</div>
          </div>
          <div class="item-content">
            <div>{{item.orgName}}</div>
            <div style="float: right;">{{item.number}}次</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
function addWrap(startNum, endNum, total, str) {
  var newStr = ''
  if (total <= endNum) {
    newStr = str
  } else {
    newStr = str.substring(startNum, endNum)
    var remainNum = total - endNum
    var newStartNum = endNum
    var newEndNum = endNum + endNum
    if (remainNum <= endNum) {
      newStr = newStr + '\n' + str.substring(newStartNum, total)
    } else {
      newStr = newStr + '\n' + str.substring(endNum, newEndNum)
      var stri = addWrap(
        newStartNum,
        newEndNum,
        total,
        str.substring(endNum, total)
      )
      newStr = newStr + '\n' + stri
    }
  }

  return newStr
}
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    period: {
      type: [Number, String],
      default: '',
    },
    periodName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      majorIssuesProportion: {},
      result: '',
      dataList: [],
    }
  },

  components: {},

  computed: {},

  created() {},

  mounted() {
    var data = this.reportData
    var majorIssuesProportion = data.majorIssuesProportion
    this.majorIssuesProportion = majorIssuesProportion
    if (majorIssuesProportion) {
      var dateArray1 = {}
      var array1 = [],
        array2 = []
      for (var i = 0; i < majorIssuesProportion.thisWeek.length; i++) {
        array1.push(majorIssuesProportion.thisWeek[i].number)
      }

      for (var j = 0; j < majorIssuesProportion.lastWeek.length; j++) {
        array2.push(majorIssuesProportion.lastWeek[j].number)
      }

      dateArray1 = {
        thisWeek: array1,
        lastWeek: array2,
      }
      this.keyIssuesChart(dateArray1)
      this.result =
        parseInt(majorIssuesProportion.thisWeekTime) -
        parseInt(majorIssuesProportion.lastWeekTime)
    }

    this.dataList = data.majorIssuesOrgTop5
  },

  methods: {
    keyIssuesChart(data) {
      var dom = document.getElementById('keyIssuesChart')
      var keyIssuesChart = echarts.init(dom)
      var map4_data1 = [120, 332, 51, 34, 90]
      var map4_data2 = [220, 482, 191, 234, 290]
      var options = {
        color: ['#E1E1E1', '#4F8DD4'],
        tooltip: {
          backgroundColor: '#fff',
          borderColor: '#F3F3F3C7', // 提示边框颜色
          borderRadius: 6, // 提示边框圆角，单位px，默认为4
          borderWidth: 1,
          position: function (p) {
            //其中p为当前鼠标的位置
            return [p[0] - 80, p[1] - 70]
          },
          trigger: 'axis',
          padding: 8,
          formatter: function (params) {
            let res =
              "<span style='color:#999999;font-size:12px;float:left;'>" +
              params[1].seriesName +
              ': <label>' +
              params[1].value +
              '</label></span><br/>' +
              "<span style='color:#999999;font-size:12px;float:left;'>" +
              params[0].seriesName +
              ': <label>' +
              params[0].value +
              '</label></span><br/>'
            return res
          },
          textStyle: {
            align: 'center',
          },
          extraCssText:
            'box-shadow: 0px 0px 15px 0px rgba(129,129,129,0.2);height:40px;',
        },
        calculable: true,

        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            scale: true,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#999999',
              },
              formatter: function (params) {
                var newParamsName = ''
                var clientWidth = document.body.clientWidth // 可见区域宽度
                var paramsNameNumber = params.length

                if (clientWidth >= 400) {
                  if (paramsNameNumber >= 4) {
                    newParamsName = addWrap(0, 4, paramsNameNumber, params)
                  } else {
                    newParamsName = params
                  }
                } else if (clientWidth <= 350) {
                  if (paramsNameNumber >= 2) {
                    newParamsName = addWrap(0, 2, paramsNameNumber, params)
                  } else {
                    newParamsName = params
                  }
                } else {
                  if (paramsNameNumber >= 3) {
                    newParamsName = addWrap(0, 3, paramsNameNumber, params)
                  } else {
                    newParamsName = params
                  }
                }
                return newParamsName
              },
            },
            data: [
              '消控室无人值守',
              '消防通道堵塞',
              '重点消防设施',
              '消防系统完好性缺失',
              '日常巡检持续未完成',
            ],
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            scale: true,
            show: false,
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '上' + this.periodName,
            type: 'bar',
            barGap: 0,
            data: data.lastWeek,
          },
          {
            name: '本' + this.periodName,
            type: 'bar',
            data: data.thisWeek,
          },
        ],
      }

      keyIssuesChart.setOption(options, true)
    },
  },
}
</script>
<style lang='scss'>
</style>